<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>情绪监测 - AI治疗师</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4A90A4;
            --secondary-color: #F5F3F0;
            --accent-color: #2E7D32;
            --warning-color: #FF8A65;
            --text-dark: #2C3E50;
            --text-light: #7F8C8D;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, var(--secondary-color) 0%, #E8F4F8 100%);
            min-height: 100vh;
        }
        
        .hero-title {
            font-family: 'Playfair Display', serif;
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .chart-container {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(74, 144, 164, 0.1);
            transition: all 0.3s ease;
        }
        
        .chart-container:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }
        
        .stat-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .mood-calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
        }
        
        .mood-day {
            aspect-ratio: 1;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .mood-day:hover {
            transform: scale(1.1);
        }
        
        .mood-excellent { background: #10B981; color: white; }
        .mood-good { background: #34D399; color: white; }
        .mood-neutral { background: #FCD34D; color: #92400E; }
        .mood-poor { background: #FB923C; color: white; }
        .mood-bad { background: #EF4444; color: white; }
        .mood-none { background: #F3F4F6; color: #9CA3AF; }
    </style>
</head>
<body class="text-gray-800">
    
    <!-- Navigation -->
    <nav class="bg-white/80 backdrop-blur-md shadow-sm border-b border-gray-100 sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-teal-500 rounded-full flex items-center justify-center">
                        <span class="text-white font-bold text-lg">🤖</span>
                    </div>
                    <span class="text-xl font-semibold text-gray-800">AI治疗师</span>
                </div>
                <div class="hidden md:flex space-x-8">
                    <a href="index.html" class="text-gray-600 hover:text-blue-600 transition-colors">治疗对话</a>
                    <a href="monitoring.html" class="text-blue-600 font-medium border-b-2 border-blue-600 pb-1">情绪监测</a>
                    <a href="crisis.html" class="text-gray-600 hover:text-blue-600 transition-colors">危机支持</a>
                    <a href="support.html" class="text-gray-600 hover:text-blue-600 transition-colors">专业支持</a>
                    <a href="about.html" class="text-gray-600 hover:text-blue-600 transition-colors">关于系统</a>
                </div>
                <button class="md:hidden p-2 rounded-md text-gray-600 hover:text-blue-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>

    <!-- Header -->
    <section class="pt-12 pb-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-8">
                <h1 class="hero-title text-4xl md:text-5xl font-bold mb-4 opacity-0" id="main-title">
                    情绪监测仪表板
                </h1>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto mb-6 opacity-0" id="subtitle">
                    追踪您的心理健康状态，了解情绪变化趋势，获得个性化洞察
                </p>
            </div>
        </div>
    </section>

    <!-- Statistics Overview -->
    <section class="pb-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                <div class="stat-card rounded-2xl p-6 text-center">
                    <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full mx-auto mb-3 flex items-center justify-center">
                        <span class="text-white text-xl">📈</span>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-1" id="avg-mood">7.2</h3>
                    <p class="text-sm text-gray-600">平均情绪指数</p>
                    <p class="text-xs text-green-600 mt-1">↑ 0.3 本周</p>
                </div>
                
                <div class="stat-card rounded-2xl p-6 text-center">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-teal-500 rounded-full mx-auto mb-3 flex items-center justify-center">
                        <span class="text-white text-xl">🎯</span>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-1" id="streak-days">12</h3>
                    <p class="text-sm text-gray-600">连续记录天数</p>
                    <p class="text-xs text-blue-600 mt-1">保持好习惯！</p>
                </div>
                
                <div class="stat-card rounded-2xl p-6 text-center">
                    <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full mx-auto mb-3 flex items-center justify-center">
                        <span class="text-white text-xl">💬</span>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-1" id="total-sessions">28</h3>
                    <p class="text-sm text-gray-600">对话次数</p>
                    <p class="text-xs text-purple-600 mt-1">本周 5 次</p>
                </div>
                
                <div class="stat-card rounded-2xl p-6 text-center">
                    <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-500 rounded-full mx-auto mb-3 flex items-center justify-center">
                        <span class="text-white text-xl">⚠️</span>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-1" id="crisis-alerts">1</h3>
                    <p class="text-sm text-gray-600">危机提醒</p>
                    <p class="text-xs text-orange-600 mt-1">需要关注</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Charts -->
    <section class="pb-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
                
                <!-- Emotion Trend Chart -->
                <div class="chart-container rounded-2xl p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-xl font-semibold text-gray-800">情绪变化趋势</h3>
                        <select class="text-sm border border-gray-200 rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option>最近30天</option>
                            <option>最近7天</option>
                            <option>最近3个月</option>
                        </select>
                    </div>
                    <div id="emotion-trend-chart" style="height: 300px;"></div>
                </div>
                
                <!-- Emotion Distribution Chart -->
                <div class="chart-container rounded-2xl p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-xl font-semibold text-gray-800">情绪分布</h3>
                        <div class="flex space-x-2">
                            <button class="text-sm bg-blue-100 text-blue-800 px-3 py-1 rounded-full">本周</button>
                            <button class="text-sm text-gray-600 hover:bg-gray-100 px-3 py-1 rounded-full">本月</button>
                        </div>
                    </div>
                    <div id="emotion-distribution-chart" style="height: 300px;"></div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                
                <!-- Mood Calendar -->
                <div class="lg:col-span-2 chart-container rounded-2xl p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-xl font-semibold text-gray-800">情绪日历</h3>
                        <div class="flex items-center space-x-4">
                            <button onclick="changeMonth(-1)" class="p-2 hover:bg-gray-100 rounded-lg">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                                </svg>
                            </button>
                            <span class="font-medium" id="current-month">2024年10月</span>
                            <button onclick="changeMonth(1)" class="p-2 hover:bg-gray-100 rounded-lg">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Calendar Header -->
                    <div class="grid grid-cols-7 gap-1 mb-2">
                        <div class="text-center text-sm font-medium text-gray-600 py-2">日</div>
                        <div class="text-center text-sm font-medium text-gray-600 py-2">一</div>
                        <div class="text-center text-sm font-medium text-gray-600 py-2">二</div>
                        <div class="text-center text-sm font-medium text-gray-600 py-2">三</div>
                        <div class="text-center text-sm font-medium text-gray-600 py-2">四</div>
                        <div class="text-center text-sm font-medium text-gray-600 py-2">五</div>
                        <div class="text-center text-sm font-medium text-gray-600 py-2">六</div>
                    </div>
                    
                    <!-- Calendar Days -->
                    <div class="mood-calendar" id="mood-calendar">
                        <!-- Calendar days will be generated by JavaScript -->
                    </div>
                    
                    <!-- Legend -->
                    <div class="flex items-center justify-center space-x-4 mt-6 text-xs">
                        <div class="flex items-center space-x-1">
                            <div class="w-3 h-3 bg-green-500 rounded"></div>
                            <span>很好</span>
                        </div>
                        <div class="flex items-center space-x-1">
                            <div class="w-3 h-3 bg-yellow-400 rounded"></div>
                            <span>一般</span>
                        </div>
                        <div class="flex items-center space-x-1">
                            <div class="w-3 h-3 bg-red-500 rounded"></div>
                            <span>不佳</span>
                        </div>
                    </div>
                </div>
                
                <!-- Insights Panel -->
                <div class="chart-container rounded-2xl p-6">
                    <h3 class="text-xl font-semibold text-gray-800 mb-6">个性化洞察</h3>
                    
                    <div class="space-y-6">
                        <div class="p-4 bg-blue-50 rounded-lg">
                            <h4 class="text-sm font-medium text-blue-800 mb-2">🎯 本周亮点</h4>
                            <p class="text-sm text-blue-700">您的情绪状态在周三达到峰值，这可能与您进行的正念练习有关。</p>
                        </div>
                        
                        <div class="p-4 bg-green-50 rounded-lg">
                            <h4 class="text-sm font-medium text-green-800 mb-2">📈 改善建议</h4>
                            <p class="text-sm text-green-700">建议增加每日情绪记录频率，这将帮助我们更好地理解您的情绪模式。</p>
                        </div>
                        
                        <div class="p-4 bg-orange-50 rounded-lg">
                            <h4 class="text-sm font-medium text-orange-800 mb-2">⚠️ 关注区域</h4>
                            <p class="text-sm text-orange-700">周末的情绪波动较大，建议制定周末的routine来维持情绪稳定。</p>
                        </div>
                        
                        <div class="p-4 bg-purple-50 rounded-lg">
                            <h4 class="text-sm font-medium text-purple-800 mb-2">🎯 下周目标</h4>
                            <ul class="text-sm text-purple-700 space-y-1">
                                <li>• 保持每日情绪记录</li>
                                <li>• 尝试新的放松技巧</li>
                                <li>• 增加社交活动时间</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="mt-6 pt-6 border-t border-gray-200">
                        <button onclick="generateReport()" class="w-full bg-gradient-to-r from-blue-500 to-teal-500 text-white py-3 px-4 rounded-lg hover:shadow-lg transition-all duration-300">
                            生成详细报告
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <p class="text-gray-400">© 2024 AI治疗师. 专业的心理健康支持系统. 保护您的隐私是我们的首要责任.</p>
        </div>
    </footer>

    <script>
        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            initializeAnimations();
            initializeCharts();
            generateMoodCalendar();
        });

        // Initialize animations
        function initializeAnimations() {
            anime.timeline({
                easing: 'easeOutExpo',
                duration: 1000
            })
            .add({
                targets: '#main-title',
                opacity: [0, 1],
                translateY: [50, 0],
                delay: 300
            })
            .add({
                targets: '#subtitle',
                opacity: [0, 1],
                translateY: [30, 0],
                delay: 200
            }, '-=800');

            anime({
                targets: '.stat-card',
                opacity: [0, 1],
                translateY: [30, 0],
                delay: anime.stagger(100, {start: 600}),
                duration: 800,
                easing: 'easeOutExpo'
            });

            anime({
                targets: '.chart-container',
                opacity: [0, 1],
                translateY: [50, 0],
                delay: anime.stagger(200, {start: 800}),
                duration: 1000,
                easing: 'easeOutExpo'
            });
        }

        // Initialize charts
        function initializeCharts() {
            initEmotionTrendChart();
            initEmotionDistributionChart();
        }

        function initEmotionTrendChart() {
            const chartDom = document.getElementById('emotion-trend-chart');
            const chart = echarts.init(chartDom);
            
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['9/21', '9/22', '9/23', '9/24', '9/25', '9/26', '9/27', '9/28', '9/29', '9/30', '10/1', '10/2', '10/3', '10/4', '10/5', '10/6', '10/7', '10/8', '10/9', '10/10', '10/11', '10/12', '10/13', '10/14', '10/15', '10/16', '10/17', '10/18', '10/19', '10/20'],
                    axisLine: {
                        lineStyle: {
                            color: '#E5E7EB'
                        }
                    },
                    axisLabel: {
                        color: '#6B7280',
                        fontSize: 10
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 10,
                    axisLine: {
                        lineStyle: {
                            color: '#E5E7EB'
                        }
                    },
                    axisLabel: {
                        color: '#6B7280',
                        fontSize: 10
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#F3F4F6'
                        }
                    }
                },
                series: [{
                    name: '情绪指数',
                    type: 'line',
                    data: [6.5, 7.2, 6.8, 8.1, 7.5, 6.9, 7.8, 8.2, 7.1, 6.5, 7.3, 8.0, 7.6, 6.8, 7.2, 8.3, 7.9, 7.1, 6.6, 7.4, 8.1, 7.7, 7.0, 6.9, 7.5, 8.0, 7.3, 6.8, 7.6, 7.2],
                    smooth: true,
                    lineStyle: {
                        color: '#4A90A4',
                        width: 3
                    },
                    itemStyle: {
                        color: '#4A90A4',
                        borderWidth: 2,
                        borderColor: '#fff'
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(74, 144, 164, 0.3)'
                            }, {
                                offset: 1, color: 'rgba(74, 144, 164, 0.05)'
                            }]
                        }
                    }
                }]
            };
            
            chart.setOption(option);
            
            window.addEventListener('resize', function() {
                chart.resize();
            });
        }

        function initEmotionDistributionChart() {
            const chartDom = document.getElementById('emotion-distribution-chart');
            const chart = echarts.init(chartDom);
            
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    textStyle: {
                        fontSize: 12
                    }
                },
                series: [{
                    name: '情绪分布',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['60%', '50%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '18',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 35, name: '快乐', itemStyle: {color: '#10B981'}},
                        {value: 28, name: '平静', itemStyle: {color: '#3B82F6'}},
                        {value: 18, name: '焦虑', itemStyle: {color: '#F59E0B'}},
                        {value: 12, name: '悲伤', itemStyle: {color: '#EF4444'}},
                        {value: 7, name: '愤怒', itemStyle: {color: '#DC2626'}}
                    ]
                }]
            };
            
            chart.setOption(option);
            
            window.addEventListener('resize', function() {
                chart.resize();
            });
        }

        function generateMoodCalendar() {
            const calendar = document.getElementById('mood-calendar');
            const today = new Date();
            const year = today.getFullYear();
            const month = today.getMonth();
            
            // Get first day of month and number of days
            const firstDay = new Date(year, month, 1).getDay();
            const daysInMonth = new Date(year, month + 1, 0).getDate();
            
            // Generate mood data (mock)
            const moodData = {};
            for (let day = 1; day <= daysInMonth; day++) {
                const moods = ['excellent', 'good', 'neutral', 'poor', 'bad', 'none'];
                const weights = [0.3, 0.25, 0.2, 0.15, 0.1, 0.0]; // Probability weights
                let random = Math.random();
                let mood = 'none';
                
                for (let i = 0; i < weights.length; i++) {
                    if (random < weights[i]) {
                        mood = moods[i];
                        break;
                    }
                    random -= weights[i];
                }
                
                moodData[day] = mood;
            }
            
            // Clear calendar
            calendar.innerHTML = '';
            
            // Add empty cells for days before month starts
            for (let i = 0; i < firstDay; i++) {
                const emptyDay = document.createElement('div');
                emptyDay.className = 'mood-day mood-none';
                calendar.appendChild(emptyDay);
            }
            
            // Add days of month
            for (let day = 1; day <= daysInMonth; day++) {
                const dayElement = document.createElement('div');
                dayElement.className = `mood-day mood-${moodData[day]}`;
                dayElement.textContent = day;
                dayElement.title = `第${day}天: ${getMoodText(moodData[day])}`;
                
                // Highlight today
                if (day === today.getDate()) {
                    dayElement.style.border = '2px solid #4A90A4';
                    dayElement.style.fontWeight = 'bold';
                }
                
                calendar.appendChild(dayElement);
            }
        }

        function getMoodText(mood) {
            const moodTexts = {
                'excellent': '很好',
                'good': '不错',
                'neutral': '一般',
                'poor': '不佳',
                'bad': '很差',
                'none': '无记录'
            };
            return moodTexts[mood] || '未知';
        }

        function changeMonth(direction) {
            // This would change the month display
            // For now, just show an alert
            alert('月份切换功能将在完整版本中提供');
        }

        function generateReport() {
            // Show loading state
            const button = event.target;
            const originalText = button.textContent;
            button.textContent = '生成中...';
            button.disabled = true;
            
            // Simulate report generation
            setTimeout(() => {
                button.textContent = originalText;
                button.disabled = false;
                
                // Show success message
                const notification = document.createElement('div');
                notification.className = 'fixed top-4 right-4 bg-green-50 border-l-4 border-green-400 p-4 rounded-lg shadow-lg z-50';
                notification.innerHTML = `
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-green-800">报告已生成</p>
                            <p class="text-sm text-green-700">详细的心理健康报告已保存到您的账户</p>
                        </div>
                    </div>
                `;
                
                document.body.appendChild(notification);
                
                setTimeout(() => {
                    if (notification.parentNode) {
                        notification.remove();
                    }
                }, 5000);
            }, 2000);
        }
    </script>
</body>
</html>